<!-- 聊天item -->
<script lang="ts" setup>


import type {ChatMessage} from "@/interface/Chat";

withDefaults(defineProps<{
  item: ChatMessage
}>(), {
  item: () => ({
    time: '',
    originTime: '',
    icon: '',
    name: '',
    content: '',
    isMe: false
  }),
})
</script>

<template>
  <view class="chat-item">
    <text v-if="item.time&&item.time.length" class="chat-time">
      {{ item.time }}
    </text>
    <view :class="{'chat-container':true,'chat-location-me':item.isMe}">
      <view class="chat-icon-container">
        <uv-avatar :src="item.icon" size="40" mode="aspectFill"/>
      </view>
      <view class="chat-content-container">
        <!--        <text :class="{'chat-user-name':true,'chat-location-me':item.isMe}">-->
        <!--          {{ item.name }}-->
        <!--        </text>-->
        <view :style="[{justifyContent:item.isMe?'flex-end':'flex-start'}]" class="chat-text-container-super">
          <view :class="{'chat-text-container':true,'chat-text-container-me':item.isMe}" style="font-size: 15px">
            <text :class="{'chat-text':true,'chat-text-me':item.isMe}" style="font-size: 15px">{{ item.content }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.chat-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.chat-time {
  padding: 4rpx 0rpx;
  text-align: center;
  font-size: 22rpx;
  color: #aaaaaa;
}

.chat-container {
  display: flex;
  flex-direction: row;
}

.chat-location-me {
  flex-direction: row-reverse;
  text-align: right;
}

.chat-icon-container {
  margin-top: 12rpx;
}

.chat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.chat-content-container {
  margin: 0rpx 15rpx;
}

.chat-user-name {
  font-size: 26rpx;
  color: #888888;
}

.chat-text-container {
  text-align: left;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;
  margin-top: 10rpx;
  /* #ifndef APP-NVUE */
  max-width: 500rpx;
  /* #endif */
}

.chat-text-container-me {
  background-color: #EBF9F8;
  color: #39c5bb;
}

.chat-text-container-super {
  display: flex;
  flex-direction: row;
}

.chat-text {
  font-size: 28rpx;
  /* #ifndef APP-NVUE */
  word-break: break-all;
  /* #endif */
  /* #ifdef APP-NVUE */
  max-width: 500rpx;
  /* #endif */
}

.chat-text-me {
  //color: white;
}
</style>